<template>
	<view class="content">
		<view class="title">配送</view>
		
		<view class="getgood" tabindex="1" >
			<view><image src="../../static/收货地址.png" mode="widthFix" @click="addresss"></image><text class="address" @click="towrit">收货地址 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; {{address}}</text></view>
			
		</view>
		<view class="line" id="aca"></view>
		<view class="getgood" id="time" tabindex="2">
			<view class="jkh"><image src="../../static/配送时间.png" mode="widthFix"></image>
		<view class="times"><picker class="picker date" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
		<view>{{ date }}</view>
	</picker>
	<picker class="picker" mode="time" :value="timeStart" start="09:01" end="21:01" @change="bindTimeStart">
		<view class="uni-input">{{ timeStart }}</view>
	</picker>
	-
	<picker class="picker" mode="time" :value="timeEnd" start="09:01" end="21:01" @change="bindTimeEnd">
		<view class="uni-input" >{{ timeEnd }}</view>
	</picker>
</view>
		</view>
		
		</view>
	
		<view class="good" v-for="item in buylist" :key="item.id">
			<image :src="$host+item.src" mode="widthFix"></image> <text class="text">{{item.title}}</text> 
			 <view class="money"><view>￥{{item.money}}</view> <view class="number">   × {{item.count}}</view></view>
		</view>
			<view class="line" id="line"></view>
		<view class="qs">
			<view> 起送价</view>  <view>￥20</view>
		</view>
			<view class="line"></view>
			
			<textarea class="word" placeholder="买家备注"></textarea>
			<view class="bigline" id="bigline"></view>
			
			<view class="footer">
				
				<view class="total" >
					<text>合计</text><text class="getA">￥{{totalmoney}}</text><text class="getB">(共{{goodnumber}}件)</text>
				</view>
				<view class="buygood">
					<text class="getC" @click="tobuy">下单</text>
				</view>
				
			</view>
			
	</view>
</template>

<script>
	 export default{
		  data(){
			  const currentDate = this.getDate({
			  		format: true
			  	});
			  return {
				  buylist:[],
				  totalmoney:0,
				  goodnumber:0,
				  $host:this.$host,
				  address:"",
				  id:[],
				  userState:false,
				  single:'',
				  date: currentDate,
				  		timeStart: '14:00',
				  		timeEnd: '16:00'
				  
				  
				  
			  }
		  },
		  computed:{
			  	startDate() {
			  		return this.getDate('start');
			  	},
			  	endDate() {
			  		return this.getDate('end');
			  	}
		  },
		  methods:{
			  towrit(){
				  uni.redirectTo({
				  	url:"/pages/shopCars/address"
				  })
			  },
			  getMapLocation(){
			  	uni.chooseLocation({
			  		success:(res)=> {
			  			console.log(res.address+res.name)
						this.address=res.address+res.name
						
			  		},
			  		fail:()=>{
			  			// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
			  			uni.getSetting({
			  				success: (res) => {
			  					
			  					var status = res.authSetting;
			  					if(!status['scope.userLocation']){
			  					// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
			  						uni.showModal({
			  							title:"是否授权当前位置",
			  							content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
			  							success:(tip)=>{
			  								if(tip.confirm){
			  								// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
			  									uni.openSetting({
			  										success:(data)=>{
			  										// 如果用户授权了地理信息在，则提示授权成功
			  											if(data.authSetting['scope.userLocation']===true){
			  												uni.showToast({
			  													title:"授权成功",
			  													icon:"success",
			  													duration:1000
			  												})
			  												// 授权成功后，然后再次chooseLocation获取信息
			  												uni.chooseLocation({
			  													success: (res) => {
			  														
			  													}
			  												})
			  											}else{
			  												uni.showToast({
			  													title:"授权失败",
			  													icon:"none",
			  													duration:1000
			  												})
			  											}
			  										}
			  									})
			  								}
			  							}
			  						})
			  					}
			  				},
			  				fail: (res) => {
			  					uni.showToast({
			  						title:"调用授权窗口失败",
			  						icon:"none",
			  						duration:1000
			  					})
			  				}
			  			})
			  		}
			  	});
			  },

			  
			  	// 选择时间 日期
			  	bindDateChange: function(e) {
			  		this.date = e.target.value;
			  	},
			  	getDate(type) {
			  		const date = new Date();
			  		let year = date.getFullYear();
			  		let month = date.getMonth() + 1;
			  		let day = date.getDate();
			  
			  		if (type === 'start') {
			  			year = year - 60;
			  		} else if (type === 'end') {
			  			year = year + 2;
			  		}
			  		month = month > 9 ? month : '0' + month;
			  		day = day > 9 ? day : '0' + day;
			  		return `${year}-${month}-${day}`;
			  	},
			  	// 开始时间
			  	bindTimeStart:function(e){
			  		this.timeStart = e.target.value;
			  	},
			  	// 结束时间
			  	bindTimeEnd:function(e){
			  		this.timeEnd = e.target.value;
			  	},
			
			  maskClick(e){
			  				console.log('maskClick事件:', e);
			  			},
			  addresss(){
				   this.getMapLocation()
				  
				  // uni.navigateTo({
				  // 	url:"/pages/shopCars/address"
				  // })
				  
			  },
			  tobuy(){
				 
				  for(let i=0;i<this.id.length;i++){
				  	this.$request("/tobuy","post",{id:this.id[i]}).then(res=>{
				  							
				  	}) 
				  }
				  
				  uni.redirectTo({
				  	url:"/pages/mine/order?id=0"
				  })
				 
				 uni.showModal({
				 	content:"支付成功"
				 })  
				
			  }
		  },
		  onLoad(option) {
		  	this.address= option.address   
				
		
		  },
		onShow() {
			this.$request("/getUserData","post",{}).then(res=>{
				      this.userState=res.data[0].state
					  if( this.userState==false){
						        uni.navigateTo({
						        	url:"/pages/mine/login?index=1"
						        })
								  
					  }else{
						  this.$request("/getGoodsListdata","post",{}).then(res=>{
						  	                    // this.buylist=[]
						  				     this.buylist=res.data
						  					 	let total=0
						  						let number=0
						  					 for(let i=0;i<this.buylist.length;i++){
						  						 this.id.push(this.buylist[i].id)
						  					total+=(this.buylist[i].count*this.buylist[i].money)
						  					
						  					  number+=parseInt(this.buylist[i].count )   
						  					 }
						  					this.totalmoney=total
						  					this.goodnumber=number
						  					 
						  					 
						  })
					  }
			})
			
			
		}
		  
	 }
</script>

<style>
	.jkh{
		display: flex;
		position: relative;
		top: 20rpx;
	}
	.uni-input{
		margin-left: 10rpx;
	}
	.times{
		width: 380rpx;
		display: flex;
		position: relative;
		top: 8rpx;
		left: 10rpx;
	}
	#aca{
		 position: relative;
		 top: -20rpx;
		 margin-top: 20px;
	}
	.content>.getgood:focus{
		background-color: #f4f4f4;
	}
	.buygood{
		position: relative;
		top: 56rpx;
		height: 80px;
		
	}
	.getC{
		border-radius:22px 0px 0px 22px ;
		background-color: #fe9a69;
		font-size: 36rpx;
		color: white;
		padding: 16rpx 65rpx;
	}
	.getB{
		 font-size: 23rpx;
		 position: relative;
		 top: 6rpx;
		 margin-left: 8rpx;
	}
	.getA{
		color: #fe9a69;
	}
	.footer{
		width: 100%;
		height: 40px;
		background-color: white;
		position: fixed;
		bottom: -1px;
		left: 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.total{
		display: flex;
		justify-content: space-around;
		
	}
.word{
	margin-left: 12rpx;
	margin-top: 17rpx;
	height: 36px;

}
#bigline{
	position: relative;
	top: 36rpx;
		height: 70px;
}
#line{
	position: relative;
	top: 36rpx;
}
.qs{
	display: flex;
	justify-content: space-between;
}
.qs view{
	margin: 30px 15rpx;
}
	.number{
		margin-left: 18rpx;
	}
.money{
	margin-left: 60rpx;
	margin-top: 30rpx;
}
.good{
	margin-top: 20rpx;

	display: flex;
	
}
.text{
	margin-left: 6rpx;
	width: 220px;
	margin-top: 50rpx;
}	
.good image{
	width: 54px;
		margin-left: 20rpx;
			margin-top: 26rpx;
}
	
.bigline{
	width: 100%;
	height: 38rpx;
	background-color: #f4f4f4;
	position: relative;
	 top: 9px;
}
	.line{
	width: 100%;
	height: 1rpx;
	background-color: #f4f4f4;
	position: relative;
	 top: -10px;
	}
.title{
	width: 64px;
		height: 30px;
		background-color: #fe9a69;
		text-align: center;
		line-height: 30px;
		color: white;
		border-radius: 14px;
		margin-top: 40rpx;
		margin-left: 20rpx;
		
	}
	.getgood{
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-top: 60rpx;
		align-items: center;
		height: 40px;
	}
	.getgood image{
		width: 20px;
		position: relative;
		top: 10rpx;
		
	}
	.address{
		font-size: 38rpx;
		font-weight: 400;
		margin-left: 10rpx;
	
	}
	
	#time{
		 margin-top: -20px;
		 height: 40px;
	}
</style>